<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑任务 - T-001</title> <!-- Dynamically set this in a real app -->

    <!-- Tailwind CSS via CDN -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Font Awesome via Cloudflare CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <style>
        /* Optional: Add custom base styles or component overrides here if needed */
        body {
            font-family: 'Inter', sans-serif; /* Example using a common sans-serif font */
        }
        /* Add focus ring styles for better accessibility */
        input:focus, textarea:focus, select:focus, button:focus {
            outline: 2px solid transparent;
            outline-offset: 2px;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); /* Tailwind's blue-500 focus ring */
        }
         /* Basic input/select styling */
        .form-input, .form-select, .form-textarea {
             @apply mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 sm:text-sm transition duration-150 ease-in-out;
        }
        .form-label {
             @apply block text-sm font-medium text-gray-700 mb-1 flex items-center;
        }
        .readonly-info {
            @apply text-sm text-gray-500 bg-gray-100 px-3 py-1.5 rounded-md border border-gray-200;
        }
    </style>
    <!-- Consider adding a font like Inter from Google Fonts for better typography -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body class="bg-gradient-to-br from-gray-100 to-gray-200 min-h-screen flex flex-col">

    <!-- Header -->
    <header class="bg-white shadow-sm">
        <nav class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="text-xl font-bold text-gray-800">
                <i class="fas fa-clipboard-list mr-2 text-blue-600"></i>任务管理器
            </div>
            <div>
                <!-- Navigation links -->
                <a href="list-tasks.html" class="text-gray-600 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">查看任务</a>
                <a href="index.html" class="text-gray-600 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">创建任务</a>
                <a href="#" class="text-blue-600 hover:bg-blue-100 px-3 py-2 rounded-md text-sm font-medium border border-blue-600">登录</a>
            </div>
        </nav>
    </header>

    <!-- Main Content Area -->
    <main class="flex-grow container mx-auto px-4 py-8 md:py-12">
        <div class="max-w-3xl mx-auto bg-white p-6 md:p-8 rounded-xl shadow-lg">

            <h1 class="text-2xl md:text-3xl font-bold text-center text-gray-800 mb-6 md:mb-8">
                <i class="fas fa-pencil-alt mr-2 text-yellow-500"></i>编辑任务
            </h1>

            <!-- Display Task ID (Read-only) -->
            <div class="mb-6 p-3 bg-gray-100 rounded-md border border-gray-200 text-center">
                <span class="text-sm font-medium text-gray-600">正在编辑任务 ID:</span>
                <span class="font-mono font-bold text-gray-800 ml-2">T-001</span>
            </div>

            <form id="edit-task-form" class="space-y-6">
                <!-- Task Title -->
                <div>
                    <label for="task-title" class="form-label">
                        <i class="fas fa-heading mr-2 w-4 text-center text-gray-500"></i>任务标题 <span class="text-red-500 ml-1">*</span>
                    </label>
                    <input type="text" id="task-title" name="task-title"
                           class="form-input"
                           value="完成项目初步设计"
                           required>
                    <p id="title-error" class="text-red-500 text-xs mt-1 hidden">任务标题不能为空。</p>
                </div>

                <!-- Task Description -->
                <div>
                    <label for="task-description" class="form-label">
                        <i class="fas fa-align-left mr-2 w-4 text-center text-gray-500"></i>任务描述
                    </label>
                    <textarea id="task-description" name="task-description" rows="5"
                              class="form-textarea"
                              placeholder="详细说明任务内容、步骤或要求...">这是任务的详细描述。需要根据客户的需求文档，完成项目核心功能的初步界面设计和交互流程图。确保设计风格与公司品牌指南一致。包含线框图和主要页面的高保真原型。</textarea> <!-- Pre-filled value -->
                </div>

                <!-- Grid for Status, Priority, Due Date -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <!-- Status -->
                    <div>
                        <label for="task-status" class="form-label">
                            <i class="fas fa-spinner mr-2 w-4 text-center text-gray-500"></i>状态
                        </label>
                        <select id="task-status" name="task-status" class="form-select">
                            <option value="pending">待处理</option>
                            <option value="inprogress" selected>进行中</option> <!-- Pre-selected -->
                            <option value="completed">已完成</option>
                            <option value="cancelled">已取消</option>
                        </select>
                    </div>

                    <!-- Priority -->
                    <div>
                        <label for="task-priority" class="form-label">
                           <i class="fas fa-flag mr-2 w-4 text-center text-gray-500"></i>优先级
                        </label>
                        <select id="task-priority" name="task-priority" class="form-select">
                            <option value="low">低</option>
                            <option value="medium">中</option>
                            <option value="high" selected>高</option> <!-- Pre-selected -->
                        </select>
                    </div>

                    <!-- Due Date -->
                    <div>
                        <label for="task-due-date" class="form-label">
                            <i class="far fa-calendar-alt mr-2 w-4 text-center text-gray-500"></i>截止日期
                        </label>
                        <input type="date" id="task-due-date" name="task-due-date"
                               class="form-input"
                               value="2023-11-15"> <!-- Pre-filled value -->
                    </div>
                </div>

                 <!-- Assignee -->
                <div>
                    <label for="task-assignee" class="form-label">
                        <i class="far fa-user mr-2 w-4 text-center text-gray-500"></i>负责人
                    </label>
                    <input type="text" id="task-assignee" name="task-assignee"
                           class="form-input"
                           value="张三" 
                           placeholder="分配给...">
                </div>

                 <!-- Read-only Timestamps -->
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-6 pt-4 border-t border-gray-200 mt-6">
                     <div>
                         <span class="form-label mb-0"><i class="far fa-calendar-plus mr-2 w-4 text-center text-gray-500"></i>创建时间</span>
                         <p class="readonly-info mt-1">2023-10-26 09:30</p> <!-- Read-only value -->
                     </div>
                      <div>
                         <span class="form-label mb-0"><i class="far fa-clock mr-2 w-4 text-center text-gray-500"></i>最后更新</span>
                         <p class="readonly-info mt-1">2023-10-28 14:15</p> <!-- Read-only value -->
                     </div>
                 </div>


                <!-- Action Buttons -->
                <div class="flex flex-col sm:flex-row justify-end items-center gap-3 pt-6 border-t border-gray-200 mt-6">
                     <a href="view-task.html" 
                           class="inline-flex items-center justify-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 w-full sm:w-auto order-2 sm:order-1">
                           <i class="fas fa-times mr-2"></i>取消
                     </a>
                    <button type="submit"
                            class="inline-flex items-center justify-center px-6 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 w-full sm:w-auto order-1 sm:order-2">
                        <i class="fas fa-save mr-2"></i>
                        保存更改
                    </button>
                </div>
            </form>
        </div>
    </main>

    <!-- Footer -->
    <footer class="bg-white mt-12 py-4 border-t border-gray-200">
        <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
            &copy; 2023 任务管理系统. 保留所有权利.
        </div>
    </footer>

    <script>
        const form = document.getElementById('edit-task-form');
        const titleInput = document.getElementById('task-title');
        const descriptionInput = document.getElementById('task-description');
        const statusSelect = document.getElementById('task-status');
        const prioritySelect = document.getElementById('task-priority');
        const dueDateInput = document.getElementById('task-due-date');
        const assigneeInput = document.getElementById('task-assignee');
        const titleError = document.getElementById('title-error');

        form.addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止表单默认提交行为

            // --- 数据验证 ---
            let isValid = true;
            const title = titleInput.value.trim();

            // 验证标题
            if (title === '') {
                titleError.classList.remove('hidden'); // 显示错误消息
                titleInput.classList.add('border-red-500'); // 添加红色边框
                titleInput.focus(); // 将焦点设置到标题输入框
                isValid = false;
            } else {
                titleError.classList.add('hidden'); // 隐藏错误消息
                titleInput.classList.remove('border-red-500'); // 移除红色边框
            }

            // 如果验证通过
            if (isValid) {
                const updatedTaskData = {
                    id: 'T-001', // Assuming we know the ID
                    title: title,
                    description: descriptionInput.value.trim(),
                    status: statusSelect.value,
                    priority: prioritySelect.value,
                    dueDate: dueDateInput.value,
                    assignee: assigneeInput.value.trim()
                };

                console.log('--- 正在更新任务 (ID: T-001) ---');
                console.log('更新后的数据:', updatedTaskData);

                // --- 模拟更新任务 ---
                // 在实际应用中，这里会发送 PUT 或 PATCH 请求到服务器
                /*
                fetch('/api/tasks/T-001', { // Assuming RESTful endpoint
                    method: 'PUT', // or 'PATCH'
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(updatedTaskData),
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    console.log('任务更新成功:', data);
                    alert('任务更新成功！');
                    // Optionally redirect to the view page
                    window.location.href = 'view-task.html'; // Redirect to view details
                })
                .catch((error) => {
                    console.error('任务更新失败:', error);
                    alert('任务更新失败，请稍后重试。');
                });
                */

                // 模拟成功提示
                alert(`任务 "T-001" 更新成功！(新信息已打印到控制台)`);

                // 可以在这里重定向回查看页面
                // window.location.href = 'view-task.html';

            } else {
                console.log('表单验证失败');
            }
        });

        // 当用户开始输入标题时，移除错误状态
        titleInput.addEventListener('input', () => {
            if (titleInput.value.trim() !== '') {
                titleError.classList.add('hidden');
                titleInput.classList.remove('border-red-500');
            }
        });

    </script>

</body>
</html>
